<!--
* @Description: 添加监控点
* @Author: yihua
* @Date: 2023/4/3 12:02
* @LastEditTime: 2023/4/3 12:02
-->
<template>
  <div class="carnbon-container" style="padding-bottom: 30px">
    <el-breadcrumb separator="/" style="padding:0px 20px 10px">
      <el-breadcrumb-item  :to="'/carbon/monitoring/index'">监控点配置</el-breadcrumb-item>
      <el-breadcrumb-item :to="'/carbon/monitoring/config'">添加监控点</el-breadcrumb-item>
    </el-breadcrumb>
    <el-form inline :model="formDataState" class="configure-form" ref="formDataRef">
      <el-card class="box-card" :header="'基本信息'">
        <el-form-item label="监控点编号" prop="code">
          <el-input v-model.trim="formDataState.code" placeholder="请输入监控点编号" />
        </el-form-item>
        <el-form-item label="监控点名称" prop="code">
          <el-input v-model.trim="formDataState.code" placeholder="请输入监控点编号" />
        </el-form-item>
        <el-form-item label="监控点类型" prop="type">
          <el-select v-model="formDataState.type" placeholder="请选择监控点类型">
            <el-option v-for="(op, oIndex) in ['虚拟','真实']"  :key="op" :label="op" :value="op" />
          </el-select>
        </el-form-item>
        <el-form-item label="启用时间" prop="date" v-if="formDataState.type == '真实'">
          <el-date-picker v-model="formDataState.date" type="monthrange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"/>
        </el-form-item>
      </el-card>
      <el-card class="box-card" :header="'监控点属性'">
        <pointAtrribute />
      </el-card>

      <!-- 已調整好不用看 -->
      <el-card class="box-card carbon-config-card" :header="'能源配置'">
        <el-row v-if="formDataState.type == '真实'">
          <el-col :span="12" v-for="(item, index) in muti_list" :key="index" >
            <el-row>
              <el-form-item :label="item.energySourceName+'监控设备'" :prop="item.energySourceName"  style="width:48%;margin-right:2% !important;">
                <el-select v-model="muti_choose_ids[index]" placeholder="请选择">
                  <el-option v-for="it in item.deviceList" :key="it.id" :label="it.alias" :value="it.id"/>
                </el-select>
              </el-form-item>
              <el-form-item :label="item.energySourceName+'消耗量'"  :style="(index%2==0 ) ?'width:48%;margin-right:2% !important;':'width:50%;'">
                <div class="formula_container iotInput" id="3" @click="openFormula(item.energySourceType)">
                  <span class="formula_content">
                    <span class="formula_show"  ref="algorithmInputRef" v-html="muti_list_html[index]">
                    </span>
                  </span>
                  <el-tooltip  :content="muti_list_input_html[index]" placement="top" popper-class="space-auth-status-tip" v-if="muti_list_input_html[index]">
                    <span><el-icon class="el-icon&#45;&#45;right" :size="18" style="margin-top:5px;"><Warning /></el-icon></span>
                  </el-tooltip>
                  <span v-else><el-icon class="el-icon&#45;&#45;right" :size="18" style="margin-top:5px;"><Warning /></el-icon></span>
                </div>
              </el-form-item>
            </el-row>
          </el-col>
        </el-row>
        <el-row v-if="formDataState.type == '虚拟'" :gutter="20">
          <el-col :span="6" v-for="(item, index) in muti_list" :key="index" >
            <el-form-item :label="item.energySourceName+'消耗量'">
              <div class="formula_container iotInput" :id="index+1" @click="openFormula(item.energySourceType)">
                  <span class="formula_content">
                    <span class="formula_show"  ref="algorithmInputRef" v-html="muti_list_html[index]">
                    </span>
                  </span>
                <el-tooltip  :content="muti_list_input_html[index]" placement="top" popper-class="space-auth-status-tip" v-if="muti_list_input_html[index]">
                  <span><el-icon class="el-icon&#45;&#45;right" :size="18" style="margin-top:5px;"><Warning /></el-icon></span>
                </el-tooltip>
                <span v-else><el-icon class="el-icon&#45;&#45;right" :size="18" style="margin-top:5px;"><Warning /></el-icon></span>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <!-- 已調整好不用看 -->

      <formula ref="formulaFormRef" @changeAlgorithmInput="changeAlgorithmInput"/>

      <el-card class="box-card" :header="'碳排放配置'">
        <el-radio-group v-model="boundary">
          <el-radio-button label="主体边界排放" />
          <el-radio-button label="履约边界排放" />
          <el-radio-button label="配额边界" />
        </el-radio-group>
        <div v-if="formDataState.type == '真实'">
          <carbonEmission :boundaryNumber="1" :muti_list="muti_list" v-show="boundary=='主体边界排放'"></carbonEmission>
          <carbonEmission :boundaryNumber="2" :muti_list="muti_list" v-show="boundary=='履约边界排放'"></carbonEmission>
          <carbonEmission :boundaryNumber="3" :muti_list="muti_list" v-show="boundary=='配额边界'"></carbonEmission>
        </div>
        <div v-if="formDataState.type == '虚拟'">
          <correlateFormula :boundaryNumber="1" v-show="boundary=='主体边界排放'"></correlateFormula>
          <correlateFormula :boundaryNumber="2" v-show="boundary=='履约边界排放'"></correlateFormula>
          <correlateFormula :boundaryNumber="3" v-show="boundary=='配额边界'"></correlateFormula>
        </div>
      </el-card>

      <footer class="monitoring-footer">
        <el-button @click="onBack">返回</el-button>
        <el-button type="primary" @click="onSave">保存</el-button>
      </footer>

    </el-form>
  </div>
</template>
<script lang="ts" setup>
  import { reactive , defineProps, getCurrentInstance ,defineExpose , nextTick, ref } from 'vue';
  import { useRouter } from 'vue-router';
  type FormInstance = InstanceType<typeof ElForm>;
  import { muti_list}  from './backResAddPoint.ts'

  import formula from './formula.vue'
  import pointAtrribute from './pointAttribute.vue';
  import carbonEmission from './carbonEmission.vue'
  import correlateFormula from './correlateFormula.vue';

  import { delHtmlTag } from '@/utils/stringUtils';

  const router = useRouter();
  const formDataRef = ref();
  let formDataState= reactive({
    code:'',
    type:'真实'
  });
  const boundary = ref('履约边界排放')

  const muti_choose_ids = ref(['','','','']);
  const muti_list_html = ref(['','','','']);
  const muti_list_input_html = ref(['','','','']);

  muti_list.forEach((item:any) => {
    item.modelChooseId = ref('')
  })

  // 从子组件接收过来的值
  const changeAlgorithmInput = (e) =>{
    console.log('从子组件接收过来的值',e);
    if(e){
      muti_list_html.value[e.rowNumber] = e.value;
      muti_list_input_html.value[e.rowNumber] = delHtmlTag(e.value);
    }
  }

  const formulaFormRef = ref(null)
  const openFormula = (row) => {
    console.log('row',row);
    formulaFormRef.value && formulaFormRef.value.open(row);
  }

  const go = (path: string) => {
    router.push({
      path:path
    })
  }
  const onBack = () => { go('/carbon/monitoring/index')}
  const onSave = () => { go('/carbon/monitoring/index')}
</script>
<style lang="scss" scoped>
  :deep {
    .configure-form {
      padding:10px 20px;
      .el-card{
        margin-bottom: 15px;
      }
      .el-card__header {
        padding:10px ;
        font-size: 14px;
        background: #f9f9f9;
        border-left: 3px solid #0080ff;
        border-radius: 3px;
      }
      .el-card__body {
        padding-top: 15px;
        padding-bottom:0px;
      }
      .carbon-config-card{
        .el-form-item{
          display: flex;
          margin-right: 0px !important;
          flex-direction: column !important;
          .el-form-item__content {
            padding-left: 0 !important;
          }
        }

        .el-form--inline .el-form-item {
          display: flex;
          vertical-align: middle;
          margin-right: 1.66667rem;
          flex-direction: column !important;
          padding-left: 3px;
          justify-content: flex-start;
        }
        .el-form-item__label{
          display: flex;
          justify-content: flex-start;
        }
      }
    }
  }
  .monitoring-footer{
    position: fixed;
    bottom:0;
    left:235px;
    right:0;
    width: auto;
    z-index: 10;
  }
</style>